<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <SearchForm
          v-show="showSearch"
          v-model="queryParams"
          :options="options.formOps"
          @onQuery="getList"
        >
        </SearchForm>
        <el-row :gutter="10" class="mb8">
          <right-toolbar
            v-model:showSearch="showSearch"
            @queryTable="getList"
          ></right-toolbar>
        </el-row>
        <Table
          ref="table"
          :auto-featch="false"
          :fetch-data="fetchData"
          :options="options.table"
        >
        </Table>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import Table from "@/components/Table/index.vue";
import SearchForm from "@/components/searchForm/index";
import DialogVform from "@/components/dialogVform/index";
import formJson from "./yh.json";
import { apis as APIS } from "@/api/yhpc/yhpcrwpz.js";

import { useAsyncData, useFormJson } from "@/views/hooks/useAsyncData.js";
import FileUpload from "@/components/FileUpload";
const props = defineProps({
  parentNode: {
    type: Object,
    default: () => ({}),
  },
});

const { proxy } = getCurrentInstance();
const ops = useFormJson(formJson, {
  sort: [],
  sortable: [],
});

const options = reactive({
  table: ops,
  formOps: ops.filter((i) =>
    ["hiddenSource", "hiddenType", "hiddenLevel", "hiddenCheckType"].includes(
      i.prop
    )
  ),
});
const files = ref([]);
const showSearch = ref(true);
const dialogVform = ref();
const table = ref();

// 补充修改.新增事件
const plugEdit = (row) => {
  form.value.hiddenImageFileName = row.hiddenImageFileName;
  form.value.hiddenImageFileId = row.hiddenImageFileId;
  form.value.hiddenImageFileUrl = row.hiddenImageFileUrl;

  if (row.hiddenImageFileId) {
    files.value = [
      {
        name: row.hiddenImageFileName,
        id: row.hiddenImageFileId,
        url: row.hiddenImageFileUrl,
      },
    ];
  }
};

const filterForm = ref({});
const formatList = (list) => {
  return list.map((item) => {
    let detail = item.inspectionPlanTaskDetails || {};
    return {
      ...item,
      ...detail,
    };
  });
};
const { fetchData, handleEdit, getList, queryParams, form } = useAsyncData({
  APIS: {
    query: APIS.yhQuery,
  },
  formJson,
  dialogVform,
  table,
  proxy,
  plugEdit,
  filterForm: filterForm.value,
  formatList,
});
watch(
  () => props.parentNode,
  (val) => {
    filterForm.value.taskId = val.id || null;
    getList();
  },
  {
    deep: true,
  }
);
const changeParent = (p) => {
  filterForm.value.taskId = p.id || null;
  getList();
};
defineExpose({
  changeParent,
});
</script>

<style lang="scss" scoped>
::v-deep.el-form-item__label {
  text-align: right !important;
}
</style>
